<template>

  <div style="width: 100%;height: 80px;display:flex;justify-content: center;margin-bottom: 30px">
    <h1>欢迎使用小吴进销存管理系统</h1>
  </div>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item>
      <h3 text="2xl" justify="center"><img src="../img/1.png"></h3>
    </el-carousel-item>
    <el-carousel-item>
      <h3 text="2xl" justify="center"><img src="../img/2.png"></h3>
    </el-carousel-item>
    <el-carousel-item>
      <h3 text="2xl" justify="center"><img src="../img/3.png"></h3>
    </el-carousel-item>
  </el-carousel>

  <div style="margin: auto;width: 600px;height: 600px">
    <div style="margin-top: 50px"> 请输入用户名：
      <el-input v-model="userObj.userName" placeholder="请输入用户名" input-style="width:400px"/>
    </div>
    <div style="margin-top: 50px"> 请输入密码：&nbsp;&nbsp;&nbsp;
      <el-input v-model="userObj.pwd" type="password" placeholder="请输入密码" show-password width="400" input-style="width:400px"/>
    </div>
    <div style="margin-top: 50px;display: flex;justify-content: center">
      <el-button type="primary" @click="land">登录</el-button>
    </div>
    <div style="text-align: center;margin-top: 50px">
      <span style="color: red">{{errSpan}}</span>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      userObj:{},
      errSpan:''
    }
  },
  methods:{
    land(){
      axios.get("/project/user/login",{
        params:this.userObj
      }).then(resp=>{
        if (resp.data=="ok"){
          this.$router.push("/index");
        }else{
          this.errSpan="用户名或密码输入错误！"
        }
      })

    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.8;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

img {
  width: 550px;
  height: 240px;
}
</style>